
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .wrap {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url('images/bg03.jpg') center bottom no-repeat;
        overflow: auto;
      }

      .navbar-brand {
        padding: 10px 15px;
      }
      .logout {
        font-weight: 900;
        font-size: 20px;
        color: #ff0000;
        text-decoration: none;
      }

      .logout:hover {
        text-decoration: none;
        color: yellowgreen;
      }
      #my-table th {
        text-align: center;
      }
      #my-table td {
        text-align: center;
        line-height: 80px;
        padding: 0;
        padding: 10px;
      }
      td img {
        width: 80px;
        height: 80px;
      }
      .username {
        font-weight: 900;
        color: hotpink;
        background-color: yellowgreen;
      }
      .pagination {
        margin: 0px;
        padding: 0px;
        font-size: 0;
        line-height: 1;
      }
      .pagination li {
        display: inline-block;
        font-size: 14px;
      }
      .mp15 {
        margin-top: 15px;
      }
      .table {
        margin-bottom: 0;
      }
      .table-bordered > thead > tr > td,
      .table-bordered > thead > tr > th {
        border-bottom-width: 1px;
      }
      .page-title {
        font-size: 16px;
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <nav class="navbar  navbar-inverse navbar-static-top">
        <div class="container">
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#mymenu"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="images/logo.png"/></a>
          </div>
        </div>
      </nav>

      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="panel panel-default">
              <div class="panel-heading clearfix">
                <div class="row">
                  <div class="col-md-6 page-title">英雄列表</div>
                  <div class="col-md-6 text-right">当前位置：首页</div>
                </div>
              </div>
              <div class="panel-body">
                <!-- action 不写 就是当前页面 method 不写 就是 get -->
                <div class="row">
                  <div class="col-md-9">
                    <!--<form class="form-inline">
                      <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount"
                          >Amount (in dollars)</label
                        >
                        <div class="input-group">
                          <div class="input-group-addon">英雄姓名</div>
                          <input
                            type="text"
                            value=""
                            class="form-control"
                            name="search"
                            placeholder="请输入查询内容"
                          />
                        </div>
                      </div>
                      <button type="submit" class="btn btn-default">查找</button>
                    
                    </form>-->
                  </div>
                  <div class="col-md-3">
                    <a href="./add.html" class="btn btn-success pull-right"
                      >新增</a
                    >
                  </div>
                </div>

                <table id="my-table" class="table table-bordered mp15">
                  <thead>
                    <tr>
                      <th width="25%">头像</th>
                      <th width="25%">姓名</th>
                      <th width="25%">技能</th>
                      <th width="25%">操作</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script src="./lib/js/template-web.js"></script>
<script id="tmp" type="text/html">
  {{each}}
  <tr>
    <td><img src="{{$value.icon}}" alt=""></td>
    <td>{{$value.name}}</td>
    <td>{{$value.skill}}</td>
    <td>
      <button data-id = '{{$value.id}}' class="btn btn-primary">编辑</button>
      <button data-id = '{{$value.id}}' class="btn btn-danger">删除</button>
    </td>
  </tr>
  {{/each}}
</script>

<script>
  $(function () {
    // 一进入页面就发送请求获取所有数据 渲染到模板
    $.ajax({
      type: 'get',
      url: 'http://localhost:4399/hero/all',
      success: function (res) {
        // console.log(res);
        $('tbody').html(template('tmp', res.data))
      }
    })


    // 给删除按钮注册委托点击事件
    $('tbody').on('click', '.btn-danger', function () {
      // console.log(123);
      let _this = $(this) //保存删除按钮
      if (confirm('你确定要删除吗')) {
        let heroID = $(this).attr('data-id')
        // console.log(heroID);

        $.ajax({
          type: 'get',
          url: 'http://localhost:4399/hero/delete',
          data: {
            id: heroID
          },
          success: function (res) {
            // console.log(res);
            if (res.code == 204) {
              alert('删除成功')
              _this.parents('tr').remove()
            }
          }
        })
      }
    })

    // 给编辑按钮注册委托点击事件 跳转到编辑页
    $('tbody').on('click','.btn-primary',function(){
      // 获取当前点击按钮的id 保存起来 拼接在路径后面带到编辑页
      let id = $(this).attr('data-id')
      location.href = './edit.html?id='+id
    })
  })
</script>
